<template>
  <div class="advert-banner">
    <em-image
      :src="imageObject.thumb || defaultImage"
      width="100%"
      fit="cover"
      :alt="imageObject.title || placeholderText"
      :radius="radius"
      :ratio="ratio"
      use-error-slot
    >
      <template slot="error">{{ imageObject.title }}</template>
    </em-image>
  </div>
</template>

<script>
export default {
  name: 'BannerAdvert',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      defaultImage: require('@/assets/images/default/rectangle.png')
    }
  },
  computed: {
    options() {
      return this.value
    },
    placeholderText() {
      if (this.options && this.options.title) {
        return `${this.options.title}`
      }
      if (this.styles && this.styles.ratio) {
        const ratio = Math.abs(this.styles.ratio)
        if (ratio !== 0) {
          var width = 750
          var height = (width / ratio).toFixed()
          return `${width} * ${height}`
        }
      }
      return ''
    },
    items() {
      var items = []
      if (this.options && this.options.items) {
        items = this.options.items
      }
      return items
    },
    styles() {
      if (this.options && this.options.styles) {
        return this.options.styles
      }
      return null
    },
    ratio() {
      if (this.styles) {
        if (this.styles.ratio) {
          return this.styles.ratio
        }
        var width = this.styles.width || 750
        var height = this.styles.height || 0
        if (!/^\d+$/.test(height)) {
          height = Number(height.replace(/[^0-9]/gi, ''))
        }
        if (height > 0) {
          return width / height
        }
      }
      return 10 / 3
    },
    radius() {
      if (this.styles && this.styles.radius) {
        return this.styles.radius
      }
      return 0
    },
    imageObject() {
      var items = []
      if (this.options && this.options.items) {
        items = this.options.items
      }
      if (!items.length) {
        items.push({
          thumb: '',
          title: ''
        })
      }
      return items[0]
      // return (
      //   this.items[0] || {
      //     title: this.placeholderText,
      //     thumb: this.defaultImage
      //   }
      // )
    }
  }
}
</script>

<style lang="scss" scoped>
.advert-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
</style>
